

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface ApprovalRecord {
  id: string;
  title: string;
  applicant: string;
  submitTime: string;
  processId: string;
  status: 'approved' | 'rejected' | 'transferred';
  processTime: string;
  processResult: string;
}

interface ApprovalItemProps {
  record: ApprovalRecord;
  onPress: () => void;
}

const ApprovalItem: React.FC<ApprovalItemProps> = ({ record, onPress }) => {
  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'approved':
        return styles.statusApproved;
      case 'rejected':
        return styles.statusRejected;
      case 'transferred':
        return styles.statusTransferred;
      default:
        return styles.statusApproved;
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'approved':
        return '已通过';
      case 'rejected':
        return '已驳回';
      case 'transferred':
        return '已转办';
      default:
        return '已通过';
    }
  };

  const getResultColor = (status: string) => {
    switch (status) {
      case 'approved':
        return '#10b981';
      case 'rejected':
        return '#ef4444';
      case 'transferred':
        return '#f59e0b';
      default:
        return '#10b981';
    }
  };

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <LinearGradient
        colors={['rgba(99, 102, 241, 0.1)', 'rgba(139, 92, 246, 0.1)']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.cardGradient}
      >
        <View style={styles.contentContainer}>
          <View style={styles.headerRow}>
            <View style={styles.titleContainer}>
              <Text style={styles.title}>{record.title}</Text>
              <View style={styles.metaRow}>
                <View style={styles.metaItem}>
                  <FontAwesome6 name="user" size={12} color="#9ca3af" />
                  <Text style={styles.metaText}>{record.applicant}</Text>
                </View>
                <View style={styles.metaItem}>
                  <FontAwesome6 name="clock" size={12} color="#9ca3af" />
                  <Text style={styles.metaText}>{record.submitTime}</Text>
                </View>
              </View>
            </View>
            <View style={[styles.statusBadge, getStatusStyle(record.status)]}>
              <Text style={styles.statusText}>{getStatusText(record.status)}</Text>
            </View>
          </View>

          <View style={styles.footerRow}>
            <View style={styles.footerItem}>
              <Text style={styles.footerLabel}>处理时间：</Text>
              <Text style={styles.footerValue}>{record.processTime}</Text>
            </View>
            <View style={styles.footerItem}>
              <Text style={styles.footerLabel}>处理结果：</Text>
              <Text style={[styles.footerValue, { color: getResultColor(record.status) }]}>
                {record.processResult}
              </Text>
            </View>
          </View>
        </View>
      </LinearGradient>
    </TouchableOpacity>
  );
};

export default ApprovalItem;

